<!DOCTYPE html>
<html>
<head>
    <title>SRS</title>
    <meta charset="utf-8">
    <style>
        body{
            padding-top: 30px;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="/static/player/css/bootstrap.min.css"/>
    <script type="text/javascript" src="/static/player/js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="/static/player/js/adapter-7.4.0.min.js"></script>
    <script type="text/javascript" src="/static/player/js/srs.sdk.js"></script>
    <script type="text/javascript" src="/static/player/js/winlin.utility.js"></script>
    <script type="text/javascript" src="/static/player/js/srs.page.js"></script>
</head>
<body>
<img src='https://ossrs.net/gif/v1/sls.gif?site=ossrs.net&path=/player/rtcpublisher'/>
<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a id="srs_index" class="brand" href="/">SRS</a>
            <div class="nav-collapse collapse">
                <ul class="nav">
                    <li class="active"><a id="nav_srs_player" href="/web/webSrsLives">SRS直播间</a></li>

                    <li>
                        <a href="https://github.com/ossrs/srs">
                            <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/ossrs/srs?style=social">
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="container">
    <div style="min-height: 500px;">
        <div class="form-inline">
            URL: <span th:text="${rtcUrl}"></span>
            <input type="hidden" id="txt_url" class="input-xxlarge" th:value="${rtcUrl}" />
            <button class="btn btn-primary" id="btn_play">观看直播</button>
        </div>
 

        <label></label>
        <video id="rtc_media_player" controls autoplay></video>

        <label></label>
        SessionID: <span id='sessionid'></span>

        <label></label>
        Simulator: <a href='#' id='simulator-drop'>Drop</a>
    </div>
    <footer>
        <p></p>
        <p style="text-align:center"><a href="https://github.com/ossrs/srs">SRS Team &copy; 2020</a></p>
    </footer>
</div>
<script type="text/javascript">
$(function(){
    var autostart = [[autostart]]
    var sdk = null; // Global handler to do cleanup when replaying.
    var startPlay = function(tmpurl) {
        // For example: webrtc://r.ossrs.net/live/livestream
        var url = tmpurl ? tmpurl : $("#txt_url").val();
        console.log('url', url);

        $('#rtc_media_player').show();

        // Close PC when user replay.
        if (sdk) {
            sdk.close();
        }
        sdk = new SrsRtcPlayerAsync();

        // https://webrtc.org/getting-started/remote-streams
        $('#rtc_media_player').prop('srcObject', sdk.stream);
        // Optional callback, SDK will add track to stream.
        // sdk.ontrack = function (event) { console.log('Got track', event); sdk.stream.addTrack(event.track); };

        sdk.play(url).then(function(session){
            $('#sessionid').html(session.sessionid);
            $('#simulator-drop').attr('href', session.simulator + '?drop=1&username=' + session.sessionid);
        }).catch(function (reason) {
            sdk.close();
            $('#rtc_media_player').hide();
            console.error(reason);
        });
    };

    $('#rtc_media_player').hide();

    $("#btn_play").click(function() {
        $('#rtc_media_player').prop('muted', false);
        startPlay();
    });
    $("#btn_play2").click(function() {
        $('#rtc_media_player').prop('muted', false);
        var url = $("#txt_url2").val();
        startPlay(url);
    });

    if (autostart == '1') {
        $('#rtc_media_player').prop('muted', true);
        console.warn('For autostart, we should mute it, see https://www.jianshu.com/p/c3c6944eed5a ' +
            'or https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#audiovideo_elements');

        startPlay();
    }
});
</script>
</body>
</html>
